<template>
    <div class="cake">
      <Navbar></Navbar>
      <Topper></Topper>
      <List></List>
      <hr>
      <p>
        <Breadcrumb></Breadcrumb>
      </p>
      <!-- <div class="cakes_content">
        <div class="block" v-for="item in cakesArray" :key="item.id">
        
          <el-image
            style="width: 300px; height: 300px; display: block"
            :src="item.url"
            @click="toDetail()"
          >
          </el-image>
          {{ item.flowName }}
          <p class="price">￥{{ item.price }}</p>
        </div>
      </div> -->
      <!-- <cake></cake> -->
      <Cake></Cake>
      
      <Footer></Footer>
    </div>
  </template>
  
  <script>
  import Navbar from "@/components/Navbar.vue";
  import Topper from "@/components/Topper.vue";
  import Cake from '@/components/Cake.vue'
  import List from "@/components/List.vue";
  import Footer from '@/components/Footer.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import { getCake } from '@/api/cake'
  export default {
    data() {
      return {
        cakesArray: [
          
        ],
      };
    },
    components: {
      Navbar,
      Topper,
      List,
      Footer,
      Cake,
      Breadcrumb
  
  
    },
    methods: {
      // toDetail() {
      //   // this.$router.push({ path: '/details' }).catch(err=>err)
      //   console.log("222");
      // },
      // init() {
      //   getCake()
      //     .then(res => {
  
      //       this.cakesArray = res.data
  
      //     })
      //     .catch(() => {
  
      //     })
      // }
    },
    /* mounted() {
      this.init();
    } */
  
  };
  </script>
  
  <style lang="scss">
  .cakes {
    hr {
      border: none;
      /* 移除默认的边框 */
      height: 2px;
      /* 设置水平线的高度 */
      background-color: #884e22;
      /* 设置水平线的颜色 */
      margin: 20px 0;
      /* 设置上下外边距 */
    }
  
    .cakes_content {
      background-color: #f5f5f5;
      margin: auto;
      width: 80%;
  
      .block {
        margin-top: 15px;
        padding: 10px;
        margin-left: 45px;
        background-color: #ffffff;
        display: inline-block;
  
        // border: 1px solid black;
        // float: left;
        .price {
          color: red;
          font-size: 24px;
        }
      }
    }
  }</style>